<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            Entrada de Selo
        </ui:define>
 
        <ui:define name="content">
            <h:form id="criarEntradaSeloForm">
                
                <p:messages id="criarEntradaSeloMessages" autoUpdate="true" />
                    
                <p:fieldset legend="Cabeçalho da Entrada" id="criarEntradaSeloCabecalhoPanel">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número da Nota" for="numeroDaNotaInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroDaNotaInputText" value="#{ managerCriarEntradaSelo.entradaSelo.numeroDaNota }"
                                required="true" requiredMessage="Número da Nota é obrigatório" />
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Data da Nota" for="dataDaNotaInputText" />
                        </div>
                        <div class="column3">
                            <p:calendar id="dataDaNotaInputText" value="#{ managerCriarEntradaSelo.entradaSelo.dataDaNota }" showOn="button"
                                pattern="dd/MM/yyyy" locale="pt" required="true" requiredMessage="Data da Nota é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Fornecedor" for="fornecedorInputText" />
                        </div>
                        <div class="column8">
                            <p:inputText id="fornecedorInputText" value="#{ managerCriarEntradaSelo.entradaSelo.fornecedor.nome }"
                                    required="true" requiredMessage="Fornecedor é obrigatório">
                                <script type="text/javascript">
                                    $(document).ready(function(){
                                        $('#criarEntradaSeloForm\\:fornecedorInputText').attr('readonly', 'readonly');
                                    });
                                </script>
                            </p:inputText>                            
                        </div>
                        <p:commandButton styleClass="icon-plus" icon="ui-icon-plus" onclick="dialogFornecedor.show();" process="@this" update="@this" immediate="true" />
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Observação" for="observacaoInputText" />
                        </div>
                        <div class="column8">
                            <p:inputTextarea id="observacaoInputText" value="#{ managerCriarEntradaSelo.entradaSelo.observacao }" />
                        </div>
                    </div>
                </p:fieldset>

                <p:fieldset legend="Entrada" id="criarEntradaSeloEntradaPanel" >

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do Selo" for="tipoSeloAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="tipoSeloAutoComplete" value="#{ managerCriarEntradaSelo.detalheEntradaSelo.tipoSelo }"
                                    forceSelection="true" dropdown="true" var="tipoSelo" itemValue="#{ tipoSelo }" 
                                    itemLabel="#{ tipoSelo.nome }" completeMethod="#{ managerCriarEntradaSelo.autocompletarTipoSelo }"
                                    converter="conversortiposelo" minQueryLength="3" required="true"
                                    requiredMessage="Tipo do Selo é obrigatório">
                                <p:column>
                                    <div class="color" style="background: \##{ tipoSelo.corSelo }"></div>
                                </p:column>
                                <p:column>#{ tipoSelo.nome }</p:column>
                            </p:autoComplete>                            
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Série" for="serieInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="serieInputText" value="#{ managerCriarEntradaSelo.detalheEntradaSelo.serie }"
                                required="true" requiredMessage="Série é obrigatório" />                            
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Preço" for="precoInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="precoInputText" value="#{ managerCriarEntradaSelo.detalheEntradaSelo.preco }"
                                    onkeypress="jQuery(this).autoNumeric({aSign:'R$ ', aSep: '.', aDec: ','} );" 
                                    required="true" requiredMessage="Preço é obrigatório">
                                <f:convertNumber type="currency" locale="pt-BR" />
                            </p:inputText>                            
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Número Inicial" for="numeroInicialInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroInicialInputText" value="#{ managerCriarEntradaSelo.detalheEntradaSelo.numeroInicial }"
                                    onkeypress="jQuery(this).autoNumeric({aSep: '', aDec: ',', vMin:0, wEmpty: '0', mDec: 0});">
                                <p:ajax  event="blur" listener="#{ managerCriarEntradaSelo.atualizarValores('numeroInicial') }"
                                    update="numeroInicialInputText, quantidadeInputText, numeroFinalInputText" />
                            </p:inputText>                            
                        </div>
                        <div class="column2">
                            <p:outputLabel value="Quantidade" for="quantidadeInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="quantidadeInputText" value="#{ managerCriarEntradaSelo.detalheEntradaSelo.quantidade }">
                                <p:ajax  event="blur" listener="#{ managerCriarEntradaSelo.atualizarValores('quantidade') }"
                                    update="numeroInicialInputText, quantidadeInputText, numeroFinalInputText" />
                            </p:inputText>                            
                        </div>
                    </div>

                    <div class="row">        
                        <div class="column2">
                            <p:outputLabel value="Número Final" for="numeroFinalInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="numeroFinalInputText" value="#{ managerCriarEntradaSelo.detalheEntradaSelo.numeroFinal }">
                                <p:ajax  event="blur" listener="#{ managerCriarEntradaSelo.atualizarValores('numeroFinal') }" update="numeroInicialInputText, quantidadeInputText, numeroFinalInputText" />
                            </p:inputText>                            
                        </div>
                    </div>

                    <div class="command">
                        <p:commandButton icon="ui-icon-plus" value="Adicionar" oncomplete="widthFix();"
                            actionListener="#{ managerCriarEntradaSelo.adicionarDetalheEntradaSelo }"
                            update=":criarEntradaSeloForm:criarEntradaSeloEntradaPanel" process=":criarEntradaSeloForm:criarEntradaSeloEntradaPanel" />
                        <p:commandButton icon="ui-icon-close" value="Limpar" actionListener="#{ managerCriarEntradaSelo.limpar() }"
                            update=":criarEntradaSeloForm:criarEntradaSeloEntradaPanel"
                            process="@this" oncomplete="widthFix();"
                            disabled="#{ managerCriarEntradaSelo.detalheEntradaSelo.id != null }" />
                    </div>

                    <p:dataTable id="detalheEntradaSeloDataTable" var="detalhe" value="#{ managerCriarEntradaSelo.detalhesEntradaSelos }"
                             emptyMessage="Nenhum detalhe adicionado">

                        <p:column headerText="Opções" width="5%">
                            <div class="options2">
                                <p:commandButton icon="ui-icon-pencil" actionListener="#{ managerCriarEntradaSelo.editarDetalheEntradaSelo(detalhe) }" 
                                    process="@this" update=":criarEntradaSeloForm:criarEntradaSeloEntradaPanel" />
                                <p:commandButton icon="ui-icon-trash" actionListener="#{ managerCriarEntradaSelo.removerDetalheEntradaSelo(detalhe) }"
                                    process="@this" update="detalheEntradaSeloDataTable" />                                
                            </div>
                        </p:column>
                        <p:column headerText="Cor" width="5%">
                            <div class="color" style="background: \##{ detalhe.tipoSelo.corSelo }"></div>
                        </p:column>
                        <p:column headerText="Tipo de Selo" width="25%">
                            #{ detalhe.tipoSelo.nome }
                        </p:column>
                        <p:column headerText="Série" width="10%">
                            #{ detalhe.serie }
                        </p:column>
                        <p:column headerText="Preço" width="10%">
                            <p:outputLabel value="#{ detalhe.preco }">
                                <f:convertNumber type="currency" locale="pt-BR" />
                            </p:outputLabel>
                        </p:column>
                        <p:column headerText="Número Inicial" width="15%">
                            #{ detalhe.numeroInicial }
                        </p:column>
                        <p:column headerText="Quantidade" width="10%">
                            #{ detalhe.quantidade }
                        </p:column>
                        <p:column headerText="Número final" width="15%">
                            #{ detalhe.numeroFinal }
                        </p:column>                            
                    </p:dataTable>

                </p:fieldset>

                <div class="command">
                    <p:commandButton id="salvarCommandButton" oncomplete="widthFix();"
                        actionListener="#{ managerCriarEntradaSelo.salvar() }" value="Salvar"
                        update="@form" process="@this, :criarEntradaSeloForm:criarEntradaSeloCabecalhoPanel, :criarEntradaSeloForm:detalheEntradaSeloDataTable"
                        icon="ui-icon-disk" styleClass="ui-priority-primary"  onsuccess="goY(0);"/>
                    <p:button value="Cancelar" icon="ui-icon-cancel" href="pesquisarEntradaSelo.xhtml" />
                </div>

                <p:dialog id="fornecedorDialog" widgetVar="dialogFornecedor" header="Fornecedores" dynamic="true"
                        modal="true" appendToBody="false" resizable="false" width="90%" height="450px" draggable="false" closable="false">
                    <p:panel id="fornecedorPesquisarPanel" styleClass="column12">

                        <f:validateBean disabled="true">
                            <div class="row">
                                <div class="column2">
                                    <p:outputLabel value="Nome Fantasia" for="nomeInputText" />
                                </div>
                                <div class="column4">
                                    <p:inputText id="nomeInputText" value="#{ managerCriarEntradaSelo.fornecedorBuscar.nome }" />
                                </div>

                                <div class="column2">
                                    <p:outputLabel value="CNPJ" for="cnpjInputText" />
                                </div>
                                <div class="column3">
                                    <p:inputMask id="cnpjInputText" value="#{ managerCriarEntradaSelo.fornecedorBuscar.cnpj }"
                                        mask="99.999.999/9999-99" />                                    
                                </div>
                            </div>
                        </f:validateBean>

                        <div class="command">
                            <p:commandButton actionListener="#{ managerCriarEntradaSelo.pesquisarFornecedores() }"
                                value="Pesquisar" update="fornecedorPesquisarPanel" icon="ui-icon-search"
                                process="fornecedorPesquisarPanel" />
                        </div>

                        <p:dataTable id="fornecedorDataTable" var="fornecedor" value="#{ managerCriarEntradaSelo.fornecedores }"
                                    rows="5" paginator="true" paginatorPosition="bottom" rowKey="#{ fornecedor.id }"
                                    emptyMessage="Nenhum fornecedor encontrado"
                                    selection="#{ managerCriarEntradaSelo.fornecedorSelecionado }" selectionMode="single">
                                <p:ajax event="rowSelect"  process="@this" update="@this"/>

                                <p:column headerText="Nome Fantasia" width="70%">
                                    <h:outputText value="#{ fornecedor.nome }" />
                                </p:column>
                                <p:column headerText="CNPJ" width="30%">
                                    <h:outputText value="#{ managerPesquisarPessoa.adicionarMascaraCNPJ(fornecedor.cnpj)  }" />
                                </p:column>
                        </p:dataTable>

                        <div class="command">
                            <p:commandButton actionListener="#{ managerCriarEntradaSelo.selecionarFornecedor() }"
                                update=":criarEntradaSeloForm:fornecedorInputText, :criarEntradaSeloForm:fornecedorDialog" process="@this"
                                value="Selecionar" icon="ui-icon-plus" oncomplete="dialogFornecedor.hide();" />
                            <p:commandButton value="Cancelar" actionListener="#{ managerCriarEntradaSelo.cancelar() }" icon="ui-icon-cancel"
                                onclick="dialogFornecedor.hide()" process="@this" update=":criarEntradaSeloForm:fornecedorDialog" />
                        </div>                                

                    </p:panel>  
                </p:dialog>
                
            </h:form>
        </ui:define>
    </ui:composition>

</html>
